<template>
  <div id="sidebar">
    <Avatar />
    <div class="icons">
      <router-link to="/note" title="笔记"
        ><i class="iconfont icon-biji"></i
      ></router-link>
      <router-link to="/notebooks" title="笔记本"
        ><i class="iconfont icon-bijiben"></i
      ></router-link>
      <router-link to="/trash" title="回收站"
        ><i class="iconfont icon-shanchu"></i
      ></router-link>
    </div>
    <div class="logout" @click="onLogout">
      <i class="iconfont icon-tuichu"></i>
    </div>
  </div>
</template>

<script>
import Avatar from '@/components/Avatar.vue'
import { mapActions } from 'vuex'
export default {
  components: {
    Avatar,
  },

  methods: {
    ...mapActions(['logout']),
    onLogout() {
      this.logout()
    },
  },
}
</script>

<style lang="scss" scoped>
#sidebar {
  position: fixed;
  height: 100%;
  width: 56px;
  text-align: center;
  background-color: #2c333c;
  .icons {
    margin-top: 15px;
    a {
      padding: 6px 0;
      display: block;
      color: #fff;
    }
    .router-link-active {
      background-color: #5e6266;
    }
    .iconfont {
      color: #fff;

      .logout {
        position: absolute;
        bottom: 20px;
        width: 100%;
        text-align: center;
        cursor: pointer;
      }
    }
  }
  .logout {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    cursor: pointer;
    color: #fff;
  }
}
</style>
